<template>
  <div @click="handleClick" class="x-slideitem" :class="{ 'slide-bottom': isBottom }">
    <div v-if="!isActive">
      <img class="pic" :src="url" />
      <span>{{name}}</span>
    </div>
    <div v-if="isActive" id="isActive">
      <img class="pic" :src="checkedUrl" />
      <span>{{name}}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "xsildeitem",
  props: {
    isBottom: {
      type: Boolean,
      default: false
    },
    isActive: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ""
    },
    checkedUrl: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    }
  },
  methods: {
    handleClick() {
      this.$emit("handleClick");
    }
  }
};
</script>
<style lang="less" scoped>
.x-slideitem {
  width: 140px;
  height: 60px;
  background: rgba(4, 22, 20, 0.6);
  display: flex;
  cursor: pointer;
  // justify-content: space-around;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 12px;
  color: #ffffff;
  span {
    padding-left: 10px;
    line-height: 65px;
  }
  img {
    padding-top: 3px;
  }
  &.slide-bottom {
    border-bottom: 1px solid #071f1c;
  }
  #isActive {
    color: #72edf5;
  }
  .pic {
    width: 24px;
    height: auto;
  }
}
</style>
